<!--员工选择组件-->
<template>
    <div class="page-box">
        <div class="page-search">
            <div>
                <label>员工编号</label>
                <el-input v-model="searchForm.PersonCode" style="width: 160px;"></el-input>
            </div>
            <div>
                <label>员工姓名</label>
                <el-input v-model="searchForm.Name" style="width: 160px;"></el-input>
            </div>
            <div>
                <label>身份证</label>
                <el-input v-model="searchForm.IdCard" style="width: 160px;"></el-input>
            </div>
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="page-section">

            <!--表单-->
            <el-table highlight-current-row @current-change="handleChange" :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column fixed prop="PersonCode" label="员工编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Name" label="员工姓名" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Sex" label="员工性别" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Email" label="员工邮箱" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Phone" label="手机号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="PositionalTitles" label="职位" :show-overflow-tooltip="true"></el-table-column>
            </el-table>
            <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
        </div>
        <div class="page-box-footer">
            <el-button type="primary" @click="checked">确认选择</el-button>
        </div>

    </div>
</template>
<script>
//es6 对象名
import Pagination from '@/components/Pagination.vue';
export default {
    props: {
        PersonList: {
            type: Array,
            require: true
        },

        //是否返回原生数据模型
        IsDefault: {
            type: Boolean,
            require: false,
            default: false
        },
        //是否过滤已选的员工，从传入的PersonList中查询  如果存在则不添加  不存在则添加
        IsFilter: {
            type: Boolean,
            require: false,
            default: true
        },
        //是否只能选择一项
        IsFirst: {
            type: Boolean,
            require: false,
            default: false
        },
    },
    components: {
        Pagination
    },
    mounted() {
        this.dataBind()

        window.addEventListener('resize', () => {
            if (this.$refs.dataForm)
                this.$refs.dataForm.doLayout();
        })
    },
    destroyed() {
        window.removeEventListener('resize', () => { });
    },
    data() {
        return {

            //搜索字段
            searchForm: {
                PersonCode: '',
                Name: '',
                IdCard: ''
            },
            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
            },
            tableData: [],
            isLoading: false,
        }
    },
    methods: {
        handleChange(val) {
            this.currentRow = val;
            this.$refs.dataForm.toggleRowSelection(val);
        },
        search() {
            this.pageDomain.PageIndex = 1;
            this.dataBind();
        },
        reset() {
            this.searchForm.ProcessCode = '';
            this.searchForm.ProcessName = '';
            this.searchForm.EnableFlag = '';
        },
        //分页方法
        handleSizeChange(val) {
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val) {
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },


        //获取数据
        dataBind() {
            this.isLoading = true;
            this.$http.get('/api/Employees',
                {
                    params: {
                        PageIndex: this.pageDomain.PageIndex,
                        PageSize: this.pageDomain.PageSize,
                        PersonCode: this.searchForm.PersonCode,
                        Name: this.searchForm.Name,
                        IdCard: this.searchForm.IdCard
                    }
                })
                .then(res => {
                    this.tableData = res.Data;
                    this.pageDomain.TotalCount = res.Count;
                    this.isLoading = false;
                })
        },
        checked() {
            //获取选中的每一项
            if (this.$refs.dataForm.selection.length <= 0) {
                this.showNotify('请选择一项');
                return;
            }

            //是否只选择一项
            if (this.IsFirst && this.$refs.dataForm.selection.length > 1) {
                this.showNotify('只能选择一项');
                return;
            }


            //是否只能选择一条
            if (this.IsFirst) {

                let model = this.$refs.dataForm.selection[0];
                var arr = this.PersonList.filter(x => x.PersonCode == model.PersonCode);

                if (this.IsDefault) {
                    //返回默认原生数据

                    if (this.IsFilter) {
                        if (arr.length <= 0) {
                            this.PersonList.push(model);
                        }
                    }
                    else {
                        this.PersonList.push(model);
                    }
                } else {

                    var obj = new Object();
                    //处理所需字段
                    this.$set(obj, 'PersonCode', model.PersonCode);
                    this.$set(obj, 'PlanPersonName', model.Name);
                    this.$set(obj, 'PeopleQuantity', 0);

                    if (this.IsFilter) {
                        if (arr.length <= 0) {
                            this.PersonList.push(obj);
                        }
                    }
                    else {
                        this.PersonList.push(obj);
                    }
                }
            }
            else {

                this.$refs.dataForm.selection.map(model => {

                    //如果需要返回原生数据
                    if (this.IsDefault) {
                        //如果需要过滤已选
                        if (this.IsFilter) {
                            var arr = this.PersonList.filter(x => x.PersonCode == model.PersonCode);
                            if (arr.length <= 0) {
                                this.PersonList.push(model);
                            }
                        }
                        //无需过滤
                        else {
                            this.PersonList.push(model);
                        }
                    }
                    else {

                        var obj = new Object();
                        //处理所需字段
                        this.$set(obj, 'PersonCode', model.PersonCode);
                        this.$set(obj, 'PlanPersonName', model.Name);
                        this.$set(obj, 'PeopleQuantity', 0);

                        if (this.IsFilter) {
                            //过滤选择的员工
                            var arr = this.PersonList.filter(x => x.PersonCode == model.PersonCode);
                            if (arr.length <= 0) {
                                this.PersonList.push(obj);
                            }
                        } else {
                            this.PersonList.push(obj);
                        }

                    }

                })
            }
            this.$emit('callback');
        }
    }
}
</script>

<style scoped></style>